<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta name="author" content="Auelnce,aulence@foxmail.com">
	<title>Vue路由基础</title>
	<link rel="shortcut icon" href="../../source/favicon.ico">
	<link rel="bookmark" href="../../source/favicon.ico">
	<link rel="stylesheet" href="../plugin/bootstrap.min.css">
	<link rel="stylesheet" href="css/index.css">

</head>
<body>
	<main id="app">
		<h1>Vue的路由基本配置</h1>
		<header>
			<nav>
				<!-- 使用 router-link 组件来导航. -->
				<!-- 通过传入 `to` 属性指定链接. -->
				<!-- <router-link> 默认会被渲染成一个 `<a>` 标签，可以在vue-router.js源码里搜索到 -->
				<router-link to="/home">网站首页</router-link>
				<router-link to="/product">产品介绍</router-link>
				<router-link to="/service">服务支持</router-link>
				<router-link to="/about">联系我们</router-link>
			</nav>
		</header>
		<div class="content">
			<!-- 路由出口，该组件同样是在vue-router.js里定义好的 -->
			<!-- 路由匹配到的组件将渲染在这里 -->
			<router-view></router-view>
		</div>
	</main>

	<script src="../plugin/vue.js"></script>
	<script src="../plugin/vue-router.js"></script>
	<script src="js/index.js"></script>
</body>
</html>